<template>
  <div class="courseList-list">
    <el-row :gutter="20">
      <el-col :span="6" v-for="v in tableData" :key="v.id">
        <el-card class="box-card">
          <div class="list--wrap-item clearfix" @click="toCourseDetail(v)">
            <div class="category-labels" v-if="showType">
              <p>{{ v.courseType | fiterCategoryLabels }}</p>
            </div>
            <div class="fl l-img">
              <div class="img-box img-hover">
                <!-- <div
                  v-if="v.selection == 1 && v.auditStatus == 2"
                  class="selection"
                >
                  优质
                </div> -->
                <img :src="coverImg(v)" class="fl" />
              </div>
              <!-- <div class="comment-num">
                <span
                  ><i class="el-icon-s-comment"></i
                  >{{ v.evaluateVO.evaluateNum }}</span
                >
              </div> -->
            </div>
            <div class="fl r-txt">
              <p
                class="title one-ellipsis txt-hover"
                v-html="v.title"
                :title="filterTags(v.title)"
              >
              </p>
              <div class="txt-info">
                <p class="txt-row clearfix sheng">
                  建设单位：
                  <span>{{ deptNames(v) }}</span>
                </p>
                <!-- <p class="txt-row clearfix sheng">
                  建设团队：
                  <span :title="teamInfo(v)" v-html="v.teams" v-if="showType">
                  </span>
                  <span :title="teamInfo(v)" v-else>{{ teamInfo(v) }}</span>
                </p> -->
              </div>
              <div class="txt-detil clearfix" v-if="showType">
                <p :class="[v.IntroductionShow ? 'file-on' : '']" class="fr">
                  详情
                </p>
              </div>
              <!-- <FileCountPro
                :data="v.sysKnowledgeFilesVO"
                v-if="showFileCount"
              /> -->
              <div class="txt-score clearfix">
                <!-- <LookDown :count="v.evaluateVO" /> -->
                <p class="fr date">
                  <span class="fl col i-size"
                    ><i class="el-icon-date"></i
                    >{{ v.createTime | timecycleYMD }}</span
                  >
                </p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  props: ['tableData', 'showType', 'showFileCount'], // 搜索页面的课程标签显示和搜索高亮显示判断
  components: {
    LookDown: () => import('./lookDown.vue'),
    FileCountPro: () => import('./fileCountPro.vue'),
  },
  computed: {
    deptNames() {
      return (v) => {
        if (v.sourceType == 2 && v.extFiled2) {
          //校外资源前端显示资源建设单位
          return v.extFiled2
        } else if (v.tbSysDept) {
          let dep = v.tbSysDept.deptFullnamepath.split('/')
          if (dep.length >= 3) {
            return dep[2]
          } else {
            return '陆军工程大学'
          }
        } else {
          return '陆军工程大学'
        }
      }
    },
  },
  mounted() {
    // console.log(this.tableData);
  },
  methods: {
    toCourseDetail(row) {
      let { level } = this.$store.getters
      // if (level == undefined || level >= 3) {
      //   this.warnMsg('抱歉，您没有浏览权限')
      //   return
      // }
      let type = row.courseType
      let name = 'course-detail'
      if (type == 1) {
        name = 'course-detail'
      }
      if (type == 2) {
        name = 'specialty-detail'
      }
      if (type == 3) {
        name = 'arms-librarys'
      }
      if (type == 4) {
        name = 'topic-detail'
      }
      if (type == 5) {
        name = 'micro-detail'
      }
      if (type == 6) {
        name = 'training-detail'
      }
      this.$store.commit('SETCURCOURSE', row)
      if (type == 3) {
        this.$router.push({
          name: name,
          query: { id: row.id, type: 3 },
        })
      } else {
        this.$router.push({
          name: name,
          query: { courseId: row.id },
        })
      }
    },
    filterTags(v) {
      let txt = v
      var reg = /<[^<>]+>/g
      txt = v.replace(reg, '')
      return txt
    },
  },
}
</script>
<style  lang="scss" >
.courseList-list {
  .list-wrap-hed.inside {
    background-color: #fff;
  }
  .list--wrap-item {
    cursor: pointer;
    position: relative;
    .category-labels {
      position: absolute;
      left: 0;
      top: 9px;
      background: #d7d140;
      color: #fff;
      padding: 5px 10px;
      z-index: 2;
      border-radius: 0 50px 50px 0;
      font-size: 16px;
      font-weight: 900;
    }
    .l-img {
      width: 100%;
      // height: 215px;
      position: relative;
      .img-box {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 65%;
        border-bottom: 1px solid #eee;
        img {
          position: absolute;
          left: 0;
          top: 0;
        }
        .selection {
          position: absolute;
          left: 0;
          top: 10px;
          color: #fff;
          z-index: 9;
          width: 60px;
          height: 30px;
          line-height: 30px;
          text-indent: 10px;
          background: url('~@/assets/icon02.png') no-repeat center;
          background-size: contain;
          font-size: 12px;
        }
      }
      .comment-num {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 10px 25px;
        background: rgba(32, 32, 32, 0.9);
        color: #fff;
        i {
          font-size: 16px;
          padding-right: 5px;
        }
      }
    }
    .r-txt {
      background: #fff;
      width: 100%;
      padding: 15px 15px;
      box-sizing: border-box;
      .txt-detil {
        padding-bottom: 10px;
        cursor: auto;
        .file-on {
          color: red;
        }
      }
      .title {
        padding-bottom: 15px;
        font-size: 20px;
        &:hover {
          color: var(--colorH1);
        }
      }
      .col {
        color: #8c8c8c;
      }
      .txt-info {
        .txt-row {
          width: 100%;
          margin-bottom: 10px;
          .row-cont {
            width: 90%;
          }
          .four-ellipsis {
            height: 100px;
            line-height: 24px;
          }
        }
      }
      .txt-score {
        .date {
          line-height: 24px;
        }
        p {
          .start {
            margin: 0 20px;
          }
          .marksco {
            margin-left: 50px;
          }
        }
        i.el-icon-date {
          font-weight: 900;
          margin-right: 5px;
        }
      }
    }
  }
}
.courseList-list .el-card__body {
  padding: 2px;
}
.courseList-list .el-col.el-col-6 {
  margin-bottom: 30px;
}
.course-library .courseList-list .list--wrap-item {
  // height: 375px;
}
</style>
